<template>
    <div>
        <div class="myBox">
            <div class="myHeader" :style="{backgroundImage: 'url(' + myHeader + ')'}">
                <img src="../assets/logo.png" alt="">
                <p>{{userName}}</p>
            </div>
            <div class="jobNmuber">
                <router-link to="invitelink">
                    <span>
                        <svg class="icon" aria-hidden="true" style="color:#fe574f">
                            <use xlink:href="#icon-ic_perm_contact_calendar_px"></use>
                        </svg>
                        <span>工号</span>
                    </span>
                    <span>
                        <span>{{jobNumber}}</span>
                        <svg class="icon right" aria-hidden="true">
                            <use xlink:href="#icon-you"></use>
                        </svg>
                    </span>
                </router-link>
                <router-link v-on:click="doClick('计算器')" to="calculatorSelect">
                    <span>
                        <svg class="icon" aria-hidden="true" style="color:#ffa508">
                            <use xlink:href="#icon-jisuanqi"></use>
                        </svg>
                        <span>理财计算器</span>
                    </span>
                    <svg class="icon right" aria-hidden="true">
                        <use xlink:href="#icon-you"></use>
                    </svg>
                </router-link>
            </div>
            <div class="invite">
                <router-link to="invitelink">
                    <span>
                        <svg class="icon" aria-hidden="true" style="color:#30bdef">
                            <use xlink:href="#icon-yaoqing"></use>
                        </svg>
                        <span>邀请链接</span>
                    </span>
                    <svg class="icon right" aria-hidden="true">
                        <use xlink:href="#icon-you"></use>
                    </svg>
                </router-link>
                <router-link to="inviteqr">
                    <span>
                        <svg class="icon" aria-hidden="true" style="color:#13dacf">
                            <use xlink:href="#icon-erweima1"></use>
                        </svg>
                        <span>邀请二维码</span>
                    </span>
                    <svg class="icon right" aria-hidden="true">
                        <use xlink:href="#icon-you"></use>
                    </svg>
                </router-link>
                <router-link to="solicitude">
                    <span>
                        <svg class="icon" aria-hidden="true" style="color:#fa6f21">
                            <use xlink:href="#icon-kehuguanhuai1"></use>
                        </svg>
                        <span>客户关怀提示</span>
                    </span>
                    <svg class="icon right" aria-hidden="true">
                        <use xlink:href="#icon-you"></use>
                    </svg>
                </router-link>
                <router-link to="invitelink">
                    <span>
                        <svg class="icon" aria-hidden="true" style="color:#637dea">
                            <use xlink:href="#icon-tishi"></use>
                        </svg>
                        <span>常见问题提示</span>
                    </span>
                    <svg class="icon right" aria-hidden="true">
                        <use xlink:href="#icon-you"></use>
                    </svg>
                </router-link>
            </div>
    
            <button class="exitLanding" @click="exitLanding">退出登录</button>
        </div>
    </div>
</template>
<script>
import titleJs from "@/router/title.js"

export default {
    data() {
        return {
            userName: localStorage.truename,
            jobNumber: localStorage.plainpassword,
            myHeader: require("@/assets/myHeader.png"),
        }
    },
    methods: {
        doClick(event) {
            titleJs.$emit('titleSpring', event);
        },

        exitLanding() {
            localStorage.clear();
            sessionStorage.clear();
            this.$router.push({ path: "/login" })
        }
    }
}
</script>

<style>
.myBox {
    height: 100%;
    background: #eee
}

.myBox>div {
    position: absolute;
    width: 100%;
    background: white
}

div.myHeader {
    height: 3.95rem;
    top: 0;
    background-size: 100%;
    text-align: center;
    color: white;
    font-size: .36rem;
    z-index: 999
}

.myHeader img {
    width: 1.52rem;
    border: 4px solid #cba55c;
    border-radius: 50%;
    margin-top: .83rem;
    margin-bottom: .36rem
}

.jobNmuber,
.invite {
    top: 4.28rem;
    padding: 0 .43rem;
    font-size: .32rem
}

.jobNmuber .icon,
.invite .icon {
    font-size: .5rem
}

.icon.right {
    font-size: .35rem
}

.invite {
    top: 6.6rem
}

.jobNmuber>a,
.invite>a {
    display: flex;
    height: 1rem;
    color: #333;
    border-bottom: 1px solid #eee;
    justify-content: space-between;
    align-items: center
}

.myBox>div>a svg {
    position: relative;
    top: .05rem;
    margin-right: .2rem
}
.exitLanding{
    position: absolute;
    top: 12rem;
    left: 10%;
    display: block;
    width: 80%;
    height: 1rem;
    font-size: .4rem;
    background: red;
    border: none;
    border-radius: 10px;
    color: white
}
</style>
